<style>
    .custom-toolbar{padding: 0em 1em 1em 0em;}
</style>
<style>
    .modal-body {max-height: 560px;overflow:hidden;padding: 15px 0 0 0}
    .modal-footer{background-color: white}
    .wizard-nav {
        padding: 15px 0 13px;
        border-bottom: 1px solid #eee;
        margin-top: -15px;
    }
    ul, ol, ul li, ol li {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    .wizard-nav li {
        display: inline-block;
        width: 24%;
        text-align: center;
    }
    .wizard-nav li span {
        position: relative;
        display: block;
        margin: 3px auto;
        width: 36px;
        height: 36px;
        text-align: center;
        line-height: 27px;
        border-radius: 50%;
        background: #777;
        border: 4px solid #e2e2e2;
        color: #fff;
    }
    .wizard-nav li span hr {
        position: absolute;
        top: -11px;
        left: 28px;
        width: 188px;
        height: 8px;
        background: #e2e2e2;
        border: 0 none;
    }
    .wizard-nav li.current span {
        background-color: #386d39;
    }
    .steps{
        padding-top: 15px;
        width: 3214px;
        position: relative;
        left: 0px;
    }
    .steps .step{
        display: inline-block;
        width: 800px;
        vertical-align: top;
    }
    .btn-prev {
        background: #3b3f4e;
        float: left;
    }
    .btn-next {
        background: #3b3f4e;
        float: right;
    }
    .modal-footer {
        margin-bottom: -2px;
    }
    .hide{
        display: none;
    }
    .formInput{
        height: 340px;
        overflow-y: auto;
        overflow-x: hidden;
    }
</style>
<div class="row-fluid clearfix">
    <div class="col-md-12 column">
        <ul class="breadcrumb">
            <li>
                <a href="index.html">首页</a>
            </li>
            <li class="active">
                客户绑定
            </li>
        </ul>
    </div>
    <div class="col-md-12 column">
        <div class="col-sm-12 div-page">
            <div style="width: 800px;overflow:hidden;margin:auto">
                <ol class="wizard-nav">
                    <li class="current step1">
                        客户基本信息
                                <span><hr>1
                                </span>
                    </li>
                    <li class="step2">
                        注册商户信息
                                <span>
                                    <hr>2
                                </span>
                    </li>
                    <li class="step3">
                        绑定设备信息
                                <span>
                                   <hr> 3
                                </span>
                    </li>
                    <li class="step4">
                        限额与手续费
                                <span>
                                    4
                                </span>
                    </li>
                </ol>
                <div class="steps">
                    <form id="validForm" method="post" action="#" class="form-horizontal layer_msg">
                        <div id="step1" class="step">
                            <div class="formInput">
                                <input type="hidden" class="form-control" id="PId" name="PId"/>
                                <div class="col-sm-12">
                                    <label class="col-sm-2 control-label">证件类型</label>
                                    <div class="form-group  col-sm-4">
                                        <select class="form-control" data-field="CertifiType" id="CertifiType" name="CertifiType" required>
                                            <!--动态加载-->
                                        </select>
                                    </div>
                                    <label class="col-sm-2 control-label">证件号码</label>
                                    <div class="form-group  col-sm-4">
                                        <input type="text" class="form-control" data-field="CertifiNo" id="CertifiNo" name="CertifiNo" placeholder="证件号码（必输项）" required/>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <label class="col-sm-2 control-label"></label>
                                    <div class="form-group col-sm-6">
                                        <button id="queryName" type="button" class="btn btn-primary">查 询</button>
                                        <span id="tiShi" class="hide">正在查询客户信息，请稍后………………</span>
                                    </div>
                                </div>
                                <div id="cusResp" class="hide">
                                    <div class="col-sm-12">
                                        <label class="col-sm-2 control-label">客户姓名</label>
                                        <div class="form-group col-sm-4">
                                            <input type="text" class="form-control" data-field="UseName" id="UseName" name="UseName" required />
                                        </div>
                                        <label class="col-sm-2 control-label">联系电话</label>
                                        <div class="form-group  col-sm-4">
                                            <input type="text" class="form-control" data-field="Phone" id="Phone" name="Phone" placeholder="手机/座机号码（必输项）"  required />
                                        </div>
                                    </div>
                                    <div class="col-sm-12">
                                        <label class="col-sm-2 control-label">绑定账号</label>
                                        <div class="form-group  col-sm-4">
                                            <select class="form-control" id="cards">
                                                <!--动态加载-->
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-12 hide">
                                        <label class="col-sm-2 control-label">绑定账号</label>
                                        <div class="form-group col-sm-4">
                                            <input type="text" class="form-control" id="CartNo" name="CartNo" placeholder="银行卡号（必输项）" required />
                                        </div>
                                    </div>
                                    <div class="col-sm-12">
                                        <label class="col-sm-2 control-label">联系地址</label>
                                        <div class="form-group  col-sm-4" style="width: 612px;">
                                            <input type="text" class="form-control" data-field="Address" id="Address" name="Address" placeholder="详细地址（必输项）" required/>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <div class="modal-footer" style="clear: both">
                                <button id="modal-btn-next1" type="button" class="btn btn-primary btn-next disabled">下一步</button>
                            </div>
                        </div>
                        <div id="step2" class="step">
                            <div class="formInput">
                                <div class="col-sm-12">
                                    <label class="col-sm-2 control-label">是否开通跨行</label>
                                    <div class="form-group  col-sm-4">
                                        <div class="checkbox">
                                            <label>
                                                <input type="hidden" id="IsKh" name="IsKh" value="01">
                                                <input type="checkbox" id="croBank" checked="checked">
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div  id="nr">
                                    <div class="col-sm-12">
                                        <label class="col-sm-2 control-label">商户信息</label>
                                        <div class="form-group  col-sm-4">
                                            <select class="form-control" id="merchants">
                                                <!--动态加载-->
                                            </select>
                                        </div>
                                    </div>
                                    <div id="nrr">
                                        <div class="col-sm-12">
                                            <label class="col-sm-2 control-label">商户名称</label>
                                            <div class="form-group  col-sm-4">
                                                <input type="hidden" class="form-control" id="MerchantId" name="MerchantId"/>
                                                <input type="text" class="form-control" id="MerchantName" name="MerchantName" placeholder="商户名称（必输项）" required/>
                                            </div>
                                            <label class="col-sm-2 control-label">工商注册号</label>
                                            <div class="form-group col-sm-4">
                                                <input type="text" class="form-control" id="BusergNo" name="BusergNo" placeholder="工商注册号（必输项）" required />
                                            </div>
                                        </div>
                                        <div class="col-sm-12">
                                            <label class="col-sm-2 control-label">税务登记号</label>
                                            <div class="form-group  col-sm-4">
                                                <input type="text" class="form-control" id="TaxergNo" name="TaxergNo" placeholder="税务登记号（必输项）"  required />
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <div class="modal-footer" style="clear: both">
                                <button id="modal-btn-prev0" type="button" class="btn btn-primary btn-prev">上一步</button> <button id="modal-btn-next2" type="button" class="btn btn-primary btn-next">下一步</button>
                            </div>
                        </div>
                        <div id="step3" class="step">
                            <div class="formInput">
                                <div class="form-group col-sm-12 category">
                                    设备信息 :（1.用串口线连接电脑与设备；2.单击“设备编号”输入框即可获取当前设备信息）
                                </div>
                                <div class="col-sm-12">
                                    <label class="col-sm-2 control-label">设备编号</label>
                                    <div class="form-group col-sm-4">
                                        <input type="text" class="form-control" id="DeviceId" name="DeviceId" required />
                                    </div>
                                    <label class="col-sm-2 control-label">密码键盘编号</label>
                                    <div class="form-group  col-sm-4">
                                        <input type="text" class="form-control" id="SafeDevId" name="SafeDevId" required />
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <label class="col-sm-2 control-label">设备属组</label>
                                    <div class="form-group  col-sm-4">
                                        <select class="form-control" data-field="UserType" id="UserType" name="UserType" placeholder="设备属组（必输项）" required>
                                            <!--动态加载-->
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <label class="col-sm-2 control-label">安装地址</label>
                                    <div class="form-group  col-sm-4" style="width: 612px;">
                                        <input type="text" class="form-control" id="InstallAddr" name="InstallAddr" placeholder="详细地址（必输项）" required/>
                                    </div>
                                </div>
                                <div class="form-group col-sm-12 category">
                                    客户经理信息 :（非必输项）
                                </div>
                                <div class="col-sm-12">
                                    <label class="col-sm-2 control-label">客户经理姓名</label>
                                    <div class="form-group  col-sm-4">
                                        <input type="text" class="form-control" data-field="ManagerName" id="ManagerName" name="ManagerName" placeholder="客户经理姓名"/>
                                    </div>
                                    <label class="col-sm-2 control-label">客户经理代码</label>
                                    <div class="form-group  col-sm-4">
                                        <input type="text" class="form-control" data-field="ManagerId" id="ManagerId" name="ManagerId" placeholder="客户经理代码"/>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <label class="col-sm-2 control-label">客户经理电话</label>
                                    <div class="form-group  col-sm-4">
                                        <input type="text" class="form-control" data-field="ManagerCont" id="ManagerCont" name="ManagerCont" placeholder="客户经理电话"/>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer" style="clear: both">
                                <button id="modal-btn-prev1" type="button" class="btn btn-primary btn-prev">上一步</button>
                                <button id="modal-btn-next3" type="button" class="btn btn-primary btn-next">下一步</button>
                            </div>
                        </div>
                        <div id="step4" class="step">
                            <div class="formInput">
                                <div class="col-sm-12 hide">
                                    <label class="col-sm-2 control-label">定位半径</label>
                                    <div class="form-group  col-sm-4">
                                        <input type="text" class="form-control" data-field="Radius" id="Radius" name="Radius" value="1000" required/>
                                    </div>
                                    <label class="col-sm-2 control-label">锁屏时间</label>
                                    <div class="form-group  col-sm-4">
                                        <input type="text" class="form-control" data-field="AppLockTime" id="AppLockTime" name="AppLockTime" value="300" required/>
                                    </div>
                                </div>
                                <div class="form-group col-sm-12 category">
                                    交易限额 :（初始值由设备属组的值决定）
                                </div>
                                <div class="col-sm-12" style="clear: both">
                                    <label class="col-sm-2 control-label">单笔</label>
                                    <div class="form-group col-sm-4">
                                        <input type="text" min="1" Class="form-control" id="CusLmtAmt" name="CusLmtAmt" placeholder="本行单笔限额（必输项）"   required/>
                                    </div>
                                    <label class="col-sm-2 control-label">日累计</label>
                                    <div class="form-group col-sm-4">
                                        <input type="text" min="1" class="form-control" id="CusLmtAmtDay" name="CusLmtAmtDay" placeholder="本行日累计限额（必输项）" required/>
                                    </div>
                                </div>
                                <div class="col-sm-12 kh">
                                    <label class="col-sm-2 control-label">单笔跨行</label>
                                    <div class="col-sm-4 form-group">
                                        <input type="text" min="1" class="form-control" id="CusOtherLmtAmt" name="CusOtherLmtAmt" placeholder="跨行单笔限额（必输项）"  required/>
                                    </div>
                                    <label class="col-sm-2 control-label">日累计跨行</label>
                                    <div class="col-sm-4 form-group">
                                        <input type="text" min="1" class="form-control" id="CusOtherLmtAmtDay" name="CusOtherLmtAmtDay" placeholder="跨行日累计限额（必输项）" required/>
                                    </div>
                                </div>
                                <div class="form-group col-sm-12 category">
                                    手续费设置 :
                                </div>
                                <div class="col-sm-12">
                                    <label class="col-sm-2 control-label">手续费类型</label>
                                    <div class="form-group col-sm-4">
                                        <select class="form-control" data-field="FeeCharge" id="FeeCharge" name="FeeCharge" required>
                                            <!--<option value="01">按笔收</option>-->
                                            <option value="02">按金额</option>
                                        </select>
                                    </div>
                                    <!--<label class="col-sm-2 control-label">手续费</label>
                                    <div class="form-group  col-sm-4">
                                        <input type="text" min="0" class="form-control" data-field="FeeFixedAmt" id="FeeFixedAmt" name="FeeFixedAmt" required/>
                                    </div>-->
                                </div>

                                <div class="col-sm-12">
                                    <label class="col-sm-2 control-label">本行折扣率</label>
                                    <div class="form-group col-sm-4">
                                        <input type="text" min="0" max="1" class="form-control" data-field="ABCCardFee" id="ABCCardFee" name="ABCCardFee" placeholder='范围"0.00~1.00"（必输项）' required/>
                                    </div>
                                    <label class="col-sm-2 control-label">手续费支付方</label>
                                    <div class="form-group col-sm-4">
                                        <select class="form-control" id="PayType" name="PayType" required>
                                            <option value="1">转出方</option>
                                            <option value="0">转入方</option>

                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <label class="col-sm-2 control-label kh">跨行手续费</label>
                                    <div class="form-group  col-sm-4 kh">
                                        <select class="form-control" data-field="OtherCardFee" id="OtherCardFee" name="OtherCardFee" required>
                                            <option value="">请选择</option>
                                            <option value="0">免费</option>
                                            <option value="1" selected>收费</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer" style="clear: both">
                                <button id="modal-btn-prev2" type="button" class="btn btn-primary btn-prev">上一步</button>
                                <button id="modal-btn-finish" type="submit" class="btn btn-primary btn-finish">完 成</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>

<script>
$(function () {
    $("input[required]").parent().prev().append('<span class="red">*</span>');
    $("select[required]").parent().prev().append('<span class="red">*</span>');
    FormatSelect(globalUrl+"api/Dict?Typeid=0000000005",$("#CertifiType"),"请选择","",function(data){});
    FormatSelect(globalUrl+"api/Dict?Typeid=0000000007",$("#UserType"),"请选择","",function(data){});
    var pointX=["0","-804px","-1608px","-2412px"];
    $("#modal-btn-prev0,#modal-btn-prev1,#modal-btn-prev2,#modal-btn-next1,#modal-btn-next2,#modal-btn-next3").click(function(){
        var id=$(this).attr("id");
        /*switch (id){
         case "modal-btn-next1":
         if(!validFields($("#validForm"),["Phone","Address"])){
         return;
         };
         break;
         case "modal-btn-next2":
         if(!validFields($("#validForm"),["CartNo"])){
         return;
         };
         break;
         case "modal-btn-next3":
         if(!validFields($("#validForm"),["MerchantName","BusergNo","TaxergNo",])){
         return;
         };
         break;
         }*/
        var index=id.substr(14);
        $(".steps").animate({"left":pointX[index]},300);
        $(".wizard-nav>li").removeClass("current");
        $(".wizard-nav>li").eq(index).addClass("current");
    });

    $("#DeviceId").click(function(){
     var termId = P_UploadTermID();
     if(!termId)
     {
     return;
     }
     var padId = P_UploadSafeID();
     if(!padId)
     {
     return;
     }
     $("#DeviceId").val(termId);
     $("#SafeDevId").val(padId);
     });

    $("#merchants").change(function(){
        if($(this).val()=="9999")
        {
            $("#MerchantName").val("");
            $("#BusergNo").val("");
            $("#TaxergNo").val("");
            $("#CartNo1").val("");
        }
        else
        {
            for(var i=0;i<buffer.length;i++)
            {
                if(buffer[i].MerchantId==$(this).val())
                {
                    $("#MerchantName").val(buffer[i].MerchantId);
                    $("#BusergNo").val(buffer[i].BusergNo);
                    $("#TaxergNo").val(buffer[i].TaxergNo);
                    $("#CartNo1").val(buffer[i].CartNo1);
                }
            }
        }

    });
    $("#cards").change(function(){
        if($(this).val()=="9999")
        {
            $("#CartNo").parent().parent().removeClass("hide");
            $("#CartNo").val("");
        }
        else
        {
            $("#CartNo").parent().parent().addClass("hide");
            $("#CartNo").val($("#cards").val());
        }

    });
    $("#queryName").click(function(){
        /* if(!validFields($("#validForm"),["CertifiType","CertifiNo"])){
         return;
         };*/
        $("#tiShi").removeClass("hide");
        $.ajax({
            type: "get",
            async:false,
            datatype:"json",
            url: globalUrl+"api/DeviCustomer?CertifiType="+$("#CertifiType").val()+"&CertifiNo="+$("#CertifiNo").val(),
            //url: "../json/queryResp.json",
            success: function (resp) {
                if(resp.result)
                {
                    buffer=resp.data.Merchants;
                    $("#UseName").val(resp.data.Customer.UseName);
                    $("#PId").val(resp.data.Customer.PId);
                    if(resp.data.CartNos.length==0)
                    {
                        $("#CartNo").parent().parent().removeClass("hide");
                        $("#cards").parent().parent().addClass("hide");
                        $("#merchants").parent().parent().addClass("hide");
                    }
                    else
                    {

                        $("#Phone").val(resp.data.Customer.Phone);
                        $("#Address").val(resp.data.Customer.Address);
                        initCards(resp.data.CartNos,$("#cards"));
                        initMerchants(resp.data.Merchants,$("#merchants"));
                        $("#CartNo").val($("#cards").val());
                        if(resp.data.Merchants.length!=0)
                        {
                            for(var i=0;i<buffer.length;i++)
                            {
                                if(buffer[i].MerchantId==$("#merchants").val())
                                {
                                    $("#MerchantId").val(buffer[i].MerchantId);
                                    $("#MerchantName").val(buffer[i].MerchantName);
                                    $("#BusergNo").val(buffer[i].BusergNo);
                                    $("#TaxergNo").val(buffer[i].TaxergNo);
                                }
                            }
                        }
                    }
                    $("#CertifiType,#CertifiNo,#UseName").attr("readonly",true);
                    $("#queryName").parent().parent().hide();
                    $("#cusResp").removeClass("hide");
                    $("#modal-btn-next1").removeClass("disabled");
                }
                else
                {
                    alert(resp.msg);
                }
            },
            error:function(){
                alert("后台未成功返回！");
            },
            complete:function(){
                $("#tiShi").addClass("hide");
            }
        });
    });

    $("#croBank").click(function(){
        $("#nr,.kh").toggleClass("hide");
        $(".kh").hasClass("hide")?$("#IsKh").val("00"):$("#IsKh").val("01");
    });

    $("#UserType").change(function(){
        $.ajax({
            url:globalUrl+"api/UserType?UserType="+$("#UserType").val(),
            success:function(resp)
            {
                if(resp.result)
                {
                    $("#CusLmtAmt").val(resp.data.LmtAmt).attr("max",resp.data.LmtAmt);
                    $("#CusLmtAmtDay").val(resp.data.LmtAmtDay).attr("max",resp.data.LmtAmtDay);
                    $("#CusOtherLmtAmt").val(resp.data.OtherLmtAmt).attr("max",resp.data.OtherLmtAmt);
                    $("#CusOtherLmtAmtDay").val(resp.data.OtherLmtAmtDay).attr("max",resp.data.OtherLmtAmtDay);
                }
                else
                {
                    alert(resp.msg);
                }
            }
        });
    });

    $("#FeeCharge").change(function(){
        if($(this).val()==="01")
        {
            $("#FeeFixedAmt").parent().css("display","block");
            $("#FeeFixedAmt").parent().prev().css("display","block");
            $.ajax({
                type: "get",
                dataType: "json",
                url:globalUrl+"api/UserType?Usertype="+$("#UserType").val(),
                success:function(resp){
                    $("#FeeFixedAmt").attr("min",resp.data.FactorageMin).attr("max",resp.data.FactorageMax).attr("placeHolder","取值区间为：["+resp.data.FactorageMin+"～"+resp.data.FactorageMax+"]");
                    $("#validForm").data('formValidation').destroy();
                }
            });
        }
        else
        {
            $("#FeeFixedAmt").val("");
            $("#FeeFixedAmt").parent().css("display","none");
            $("#FeeFixedAmt").parent().prev().css("display","none");
        }
    });

    $('#validForm')
            .formValidation({
                err: {
                    container: 'popover'
                },
                icon: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                }
            })
            .on('success.form.fv', function(e) {
                e.preventDefault();
                if(parseInt($("#CusLmtAmt").val())>parseInt($("#CusLmtAmtDay").val()))
                {
                    alert("单笔限额应小于日累计限额");
                    return;
                }
                if(parseInt($("#CusOtherLmtAmt").val())>parseInt($("#CusOtherLmtAmtDay").val()))
                {
                    alert("单笔跨行限额应小于日累计跨行限额");
                    return;
                }
                $.ajax({
                    type: "post",
                    data:getFormData(),
                    async:false,
                    url: globalUrl+"api/DeviCustomer",
                    success: function (resp) {
                        if(resp.result)
                        {
                            alert(resp.msg);
                            $('#modal-Template').modal('hide');
                            $('#table').bootstrapTable('refresh',{url:globalUrl+"api/Customer?"+$("#queryForm").serialize()});
                        }
                        else
                        {
                            alert(resp.msg);
                        }
                    },
                    error:function(){
                        alert("后台未成功返回！");
                    }
                });
            });
});
//读取终端序列号
function P_UploadTermID() {
    if(P_CloseCOMport()!="0000")
    {
        alert("关闭串口出错");
        return false;
    }
    //打开串口
    P_OpenCOMport();
    var a = NDV_OCX.UploadTermID();
    if(P_CloseCOMport()!="0000")
    {
        alert("关闭串口出错");
        return false;
    }
    if (a != "" && a != undefined && a != '0014') {
        return a;
    } else {
        alert(a+" 读取终端序列号失败");
        return false;
    }
}

//读取密码键盘序列号
function P_UploadSafeID() {
    if(P_CloseCOMport()!="0000")
    {
        alert("关闭串口出错");
        return false;
    }
    //打开串口
    P_OpenCOMport();
    var a = NDV_OCX.UploadSafeID();
    if(P_CloseCOMport()!="0000")
    {
        alert("关闭串口出错");
        return false;
    }
    if (a != "" && a != undefined && a != '0015') {
        return a;
    } else {
        alert(a+" 读取密码键盘序列号失败");
        return false;
    }

}

//关闭串口
function P_CloseCOMport() {
    return NDV_OCX.CloseCOMport();
}

//打开串口
function P_OpenCOMport() {
    //寻址打开串口
    for (var i = 0; i < 10; i++) {
        var openco = NDV_OCX.OpenCOMport("COM" + i, "9600");
        if (openco == '0000') {
            break;
        }
    }
}
</script>